{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>提交分享</title>
    <!-- markdown -->
    <link rel="stylesheet" href="{% static 'vditor/dist/index.css' %}" />
    <script src="{% static 'vditor/dist/index.min.js' %}"></script>

    <!-- css -->
    <link rel="stylesheet" href="{% static 'demoapp/css/index.css' %}" />
  </head>

  <body>
    <div class="header">
      {% if request.user.is_authenticated %}
      <p>用户: {{ request.user }}</p>
      <p><a href="/admin">后台管理</a></p>
      <p>登出: <a href="{% url 'logout' %}?next=/">登出</a></p>
      {% else %}
        <p><a href="{% url 'login' %}">请登入</a></p>
      {% endif %}
    </div>

    <div class="main">
      <div id="vditor" name='content'></div>

      <form method="POST" action="">
        {% csrf_token %}
        <input type="hidden" name="content" id="content">  
        <button>提交</button>
      </form>

      <!-- 最近10次提交的内容 -->

      <ul>
        {% for obj in result %}
        <li>
          <p><a href="{% url 'detail' obj.pk %}">{{ obj.content }}</a></p>
          <p>{{ obj.created_at }}</p>
          <p>{{ obj.created_by }}</p>
        </li>
        {% endfor %}
      </ul>
    </div>
    
    <script>
      var form = document.querySelector('form')

      form.onsubmit = function(e) {
        this.querySelector('#content').value = vditor.getValue()
      }


      const initValue = "## 今日分享";
      // 生成输入框
      var vditor = new Vditor("vditor", {
        height: 720,
        outline: {
          // 预览
          enable: true,
        },
        cache: {
          // 缓存
          enable: false,
        },
        value: initValue,
        mode: "wysiwyg",
        upload: {
          url: "/vditor/uploads/",
          linkToImgUrl: "/static/uploads/",
          accept: ".jpg,.png,.gif,.jpeg",
          {% comment %} filename(name) {
            return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, "-");
          }, {% endcomment %}
          setHeaders() {
            return { ["X-CSRFToken"]:"{{csrf_token}}" };
          },
          fieldName: "img",
        },
      });
    </script>
  </body>
</html>
